<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>棱镜风控平台</title>
    <!-- 引入外部资源 -->
    <link rel="stylesheet" href="/i/css/all.min.css">
    <script src="/i/js/tailwindcss.3.4.17.js"></script>
    <script src="/i/js/chart.umd.min.js"></script>
    <!-- 引入jQuery库 -->
    <script src="/i/js/jquery-3.7.1.min.js"></script>
    <!-- 引入Bootstrap库 -->
    <script src="/i/js/bootstrap.bundle.min.js"></script>
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        pending: '#86909C',
                        dark: '#1D2129',
                        'neutral-100': '#F7F8FA',
                        'neutral-200': '#E5E6EB',
                        'neutral-300': '#C9CDD4',
                        'neutral-400': '#86909C',
                        'neutral-500': '#4E5969',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .scrollbar-thin {
                scrollbar-width: thin;
            }
            .scrollbar-thin::-webkit-scrollbar {
                width: 4px;
                height: 4px;
            }
            .scrollbar-thin::-webkit-scrollbar-thumb {
                background-color: rgba(156, 163, 175, 0.5);
                border-radius: 2px;
            }
            .animate-pulse-slow {
                animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            /* Toast样式 */
            .toast {
                @apply fixed z-50 px-4 py-3 rounded-lg shadow-lg transform transition-all duration-300 flex items-center;
            }
            .toast-top-center {
                @apply top-4 left-1/2 -translate-x-1/2;
            }
            .toast-success {
                @apply bg-success text-white;
            }
            .toast-error {
                @apply bg-danger text-white;
            }
            .toast-warning {
                @apply bg-warning text-white;
            }
            .toast-info {
                @apply bg-primary text-white;
            }
            .toast-icon {
                @apply mr-2;
            }
            .toast-hidden {
                @apply opacity-0 translate-y-[-20px] pointer-events-none;
            }
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 text-dark min-h-screen flex overflow-hidden">
    <!-- 侧边栏 -->
    <aside class="w-64 bg-white border-r border-neutral-200 h-screen fixed left-0 top-0 z-30 flex flex-col transition-all duration-300" id="sidebar">
        <div class="p-5 border-b border-neutral-200">
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
                    <i class="fa fa-shield text-white text-xl"></i>
                </div>
                <h1 class="text-xl font-bold">棱镜风控平台</h1>
            </div>
        </div>
        
        <nav class="flex-grow overflow-y-auto scrollbar-thin p-4">
            <div class="space-y-1 mb-6">
                <p class="text-xs uppercase text-neutral-400 font-medium mb-2 px-3">审核管理</p>
                
                <a href="<{url c="main" a="index"}>" data-permission="main:index" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg <{if $_controller=="main" && $_action=="index"}>sidebar-active<{/if}> transition-colors nav-link">
                    <i class="fa fa-image w-5 text-center"></i>
                    <span>媒体审核</span>
                </a>
                
                
                <a href="<{url c="main" a="collection"}>" data-permission="main:collection" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg <{if $_controller=="main" && $_action=="collection"}>sidebar-active<{/if}> transition-colors nav-link">
                    <i class="fa fa-th-large w-5 text-center"></i>
                    <span>合集审核</span>
                </a>
                
                <a href="<{url c="main" a="comment"}>" data-permission="main:comment" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg <{if $_controller=="main" && $_action=="comment"}>sidebar-active<{/if}> hover:bg-neutral-100 transition-colors nav-link">
                    <i class="fa fa-comment w-5 text-center"></i>
                    <span>言论审核</span>
                </a>
                
                <a href="<{url c="main" a="certification"}>" data-permission="main:certification" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg <{if $_controller=="main" && $_action=="certification"}>sidebar-active<{/if}> hover:bg-neutral-100 transition-colors nav-link">

                    <i class="fa fa-id-card w-5 text-center"></i>
                    <span>认证审核</span>
                </a>
                
                <a href="<{url c="main" a="report"}>" data-permission="main:report" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg <{if $_controller=="main" && $_action=="report"}>sidebar-active<{/if}> hover:bg-neutral-100 transition-colors nav-link">

                    <i class="fa fa-flag w-5 text-center"></i>
                    <span>举报处理</span>
                    <span class="ml-auto bg-danger text-white text-xs px-2 py-0.5 rounded-full">24</span>
                </a>
            </div>
            
            <div class="space-y-1 mb-6">
                <p class="text-xs uppercase text-neutral-400 font-medium mb-2 px-3">审核配置</p>
                
                <a href="<{url c="main" a="auditrules"}>" data-permission="main:auditrules" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg <{if $_controller=="main" && $_action=="auditrules"}>sidebar-active<{/if}> hover:bg-neutral-100 transition-colors nav-link">

                    <i class="fa fa-list-alt w-5 text-center"></i>
                    <span>审核规则</span>
                </a>
                
                <a href="<{url c="main" a="sensitiveword"}>" data-permission="main:sensitiveword" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg <{if $_controller=="main" && $_action=="sensitiveword"}>sidebar-active<{/if}> hover:bg-neutral-100 transition-colors nav-link">

                    <i class="fa fa-ban w-5 text-center"></i>
                    <span>敏感词库</span>
                </a>
                
                <a href="<{url c="main" a="auditworkflow"}>" data-permission="main:auditworkflow" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg <{if $_controller=="main" && $_action=="auditworkflow"}>sidebar-active<{/if}> hover:bg-neutral-100 transition-colors nav-link">

                    <i class="fa fa-sitemap w-5 text-center"></i>
                    <span>审核流程</span>
                </a>
            </div>

            <div class="space-y-1 mt-6">
                <p class="text-xs uppercase text-neutral-400 font-medium mb-2 px-3">开发者中心</p>
                
                <a href="#api-docs" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg hover:bg-neutral-100 transition-colors nav-link">
                    <i class="fa fa-code w-5 text-center"></i>
                    <span>API文档</span>
                </a>
            </div>
            
            <div class="space-y-1">
                <p class="text-xs uppercase text-neutral-400 font-medium mb-2 px-3">数据中心</p>
                
                <a href="<{url c="main" a="auditstatics"}>" data-permission="main:auditstatics" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg <{if $_controller=="main" && $_action=="auditstatics"}>sidebar-active<{/if}> hover:bg-neutral-100 transition-colors nav-link">

                    <i class="fa fa-chart-bar w-5 text-center"></i>
                    <span>审核统计</span>
                </a>
                
                <a href="<{url c="main" a="auditor"}>" data-permission="main:auditor" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg <{if $_controller=="main" && $_action=="auditor"}>sidebar-active<{/if}> hover:bg-neutral-100 transition-colors nav-link">
                    <i class="fa fa-users w-5 text-center"></i>
                    <span>审核员管理</span>
                </a>
            </div>


        </nav>
        
        <div class="p-4 border-t border-neutral-200">
            <div class="flex items-center space-x-3">
                <img src="/i/avatar/avatar.jpg" id="avatar" alt="审核员头像" class="w-9 h-9 rounded-full object-cover">
                <div>
                    <p class="font-medium text-sm" id="username"></p>
                    <p class="text-xs text-neutral-500" id="userrole"></p>
                </div>
                <button class="ml-auto text-neutral-400 hover:text-neutral-600" id="logoutBtn">
                    <i class="fa fa-sign-out"></i>
                </button>
            </div>
        </div>
    </aside>
    <script>
        
// Toast提示函数
function showToast(message, type = 'info', duration = 3000) {
    // 移除已存在的toast
    $('.toast').remove();
    
    // 创建toast元素
    const toast = $(`
        <div class="toast toast-top-center toast-hidden toast-${type}">
            <i class="fa toast-icon ${getToastIcon(type)}"></i>
            <span>${message}</span>
        </div>
    `);
    
    // 添加到页面
    $('body').append(toast);
    
    // 显示toast
    setTimeout(() => {
        toast.removeClass('toast-hidden');
    }, 10);
    
    // 自动隐藏
    setTimeout(() => {
        toast.addClass('toast-hidden');
        setTimeout(() => {
            toast.remove();
        }, 300);
    }, duration);
}

/**
 * 根据类型获取对应的图标
 */
function getToastIcon(type) {
    switch(type) {
        case 'success': return 'fa-check-circle';
        case 'error': return 'fa-times-circle';
        case 'warning': return 'fa-exclamation-triangle';
        case 'info': return 'fa-info-circle';
        default: return 'fa-info-circle';
    }
}
    </script>
    <!-- 主内容区 -->
    <{include file=$__template_file}>
    <script>
        // 等待DOM加载完成
        $(document).ready(function() {
            // 根据类型获取对应的图标
            function getToastIcon(type) {
                switch(type) {
                    case 'success': return 'fa-check-circle';
                    case 'error': return 'fa-times-circle';
                    case 'warning': return 'fa-exclamation-triangle';
                    case 'info': return 'fa-info-circle';
                    default: return 'fa-info-circle';
                }
            }
            // Toast提示函数
            function showToast(message, type = 'info', duration = 3000) {
                // 移除已存在的toast
                $('.toast').remove();
                
                // 创建toast元素
                const toast = $(`
                    <div class="toast toast-top-center toast-hidden toast-${type}">
                        <i class="fa toast-icon ${getToastIcon(type)}"></i>
                        <span>${message}</span>
                    </div>
                `);
                
                // 添加到页面
                $('body').append(toast);
                
                // 显示toast
                setTimeout(() => {
                    toast.removeClass('toast-hidden');
                }, 10);
                
                // 自动隐藏
                setTimeout(() => {
                    toast.addClass('toast-hidden');
                    setTimeout(() => {
                        toast.remove();
                    }, 300);
                }, duration);
            }
            const token = localStorage.getItem('token')?localStorage.getItem('token'):false;
            // 辅助函数：检查父菜单是否需要隐藏（如果所有子菜单都被隐藏）
            function checkParentMenu($element) {
                var $parentMenu = $element.closest('.has-submenu'); // 假设父菜单有这个类
                if (!$parentMenu.length) return;
                
                // 检查父菜单下所有子链接是否都被隐藏
                var $visibleLinks = $parentMenu.find('.nav-link:visible');
                if ($visibleLinks.length === 0) {
                    $parentMenu.hide(); // 如果所有子链接都隐藏，父菜单也隐藏
                }
            }
            // 初始化页面信息
            $.ajax({
                url: `/main/InitPage`, // 模拟接口地址
                method: 'GET',
                headers: {
                    'Authorization': `Bearer ${token}`
                },
                data: {},
                success: function(response) {
                    if (response.status/1 === 0) {
                        var userInfo = response.data;
                        $('#avatar').attr("src","/i/avatar/"+userInfo["avatar"]);
                        $('#username').text(userInfo["real_name"]);
                        $('#userrole').text(userInfo["role_name"]);
                        // 初始化未读通知数量
                        $('#unread_notifications').text(userInfo["unread_notifications"]);
                        $('#total_count').text(userInfo["total_count"]+"项");
                        var permission = userInfo["permission"];
                        // 遍历所有导航链接
                        $('.nav-link').each(function() {
                            var $link = $(this);
                            var dataPermission = $link.data('permission');
                            
                            // 如果没有设置data-permission属性，默认显示（或根据需求调整）
                            if (!dataPermission) {
                                return; // 不做处理，保持默认显示状态
                            }
                            
                            // 检查用户权限列表中是否包含该权限
                            var hasPermission = permission.some(function(item) {
                                return item.permission_key === dataPermission;
                            });
                            
                            // 如果没有权限，则隐藏该链接
                            if (!hasPermission) {
                                $link.hide();
                                // 可以添加额外处理，比如如果是父菜单，检查子菜单是否都被隐藏
                                checkParentMenu($link);
                            }
                        });
                    } else {
                        showToast(response.msg, 'error');
                        localStorage.removeItem('token');
                        window.location.href = '/login/index';
                    }
                },
                error: function(error) {
                    showToast('登录失败或登录超时。', 'error');
                    localStorage.removeItem('token');
                    window.location.href = '/login/index';
                }
            });
            $('#logoutBtn').click(function(){
                localStorage.removeItem('token');
                window.location.href = '/login/index';
            })
        });
        /**
         * 获取待审核任务总数
         * @returns {Promise}
         */
        async function getTotalCount() {
            try {
                let url = '';

                url = '/system/GetTotalPendingTasks';

                const response = await fetch(url, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${localStorage.getItem('token')}`
                    }
                });

                const result = await response.json();
                
                if (!response.ok || result.status/1 !== 0) {
                    throw new Error(result.msg || `操作失败: ${response.statusText}`);
                }
                
                return result.data;
            } catch (error) {
                throw error; // 抛出错误给调用方处理
            }
        }
        getTotalCount().then(data=>{
            $('#total_count').text(data.total+"项");
        })
    </script>
</body>
</html>